← tüm projeler Web Tasarımı & Geliştirme

gen.d studio: dijital mekanların ve şefkatli arayüzlerin mimarisi

Kaydırmayı zaman çizelgesi gibi kullanan, katman katman açılan bir stüdyo sitesi.

roltasarımcı & geliştirici
yıl2026
alanstüdyo sitesi · blog
durumyayında
gen.d studio giriş sahnesi

sinematik bir kullanıcı akışı (UX)

Ziyaretçiyi sayfaya girdiği an standart bir web grid’iyle karşılamak yerine, onu rasyonel dünyadan koparıp kendi kurguladığım bir evrenin içine çekmek istedim. Sayfanın akışı, doğrusal bir okuma deneyiminden ziyade sinematik bir hikaye anlatıcılığı üzerine kurulu.

Akış, aydınlık ve uçuşan bulutların olduğu gökyüzünde (hayal gücü ve vizyon) başlıyor. Aşağı inildikçe kullanıcı önce "Hakkımda" bölümünün güvenli ve yumuşak zeminine ayak basıyor, ardından ekran yavaşça derin bir geceye geçiş yaparak LifeTwin projesinin yıldızlı evrenine dalıyor.

Ziyaretçi aşağı kaydırdıkça, performans ve baskıdan uzak bir yol arkadaşı olan Otti ile karşılaşıyor. Sayfanın başındaki o aydınlık hayaller, sayfanın sonunda LifeTwin evrenindeki kişisel bir "yıldız haritasına" dönüşüyor.

organik ve akışkan arayüz dili (UI)

Bu projede katı, keskin ve köşeli tasarım kalıplarından bilerek kaçındım. Tasarım dilinin merkezine "akışkanlık" ve "yumuşaklık" yerleştirdim.

Glassmorphism ve katmanlar Navigasyon ve içerik kartlarında kullandığım yarı geçirgen, bulanık arka planlar (backdrop-filter) sayesinde sayfanın arkasındaki dünyanın — çimenlerin, bulutların ve yıldızların — hiçbir zaman kesintiye uğramamasını sağladım.
Pastel geçişler Rasyonel bir kurumsallık yerine rüya gibi hissettiren pastel tonlar, pembeler, morlar ve yumuşak mavi degradeler kullanarak tasarıma organik bir sıcaklık kattım.
Tipografi Bu samimi hissi desteklemek için Poppins ve Nunito gibi okunaklı, yuvarlak hatlı ve insancıl tipografiler tercih ettim.

mimariyi kodlarla örmek (creative coding & yazılım)

Ekranda kurguladığım dünyaların yalnızca birer hayal olarak kalmaması, gerçekten nefes alabilmesi için işin mimarisini doğrudan kodlara yansıttım. Dışarıdan ağır kütüphaneler yüklemek yerine saf (vanilla) JavaScript, CSS ve DOM manipülasyonunun sınırlarını zorladığım teknikler kullandım:

Çok katmanlı dinamik parallax Sitedeki derinlik hissini vermek için her bir görsele özel data-depth ve data-scroll değişkenleri atadım. Sayfa sadece aşağı kaydırıldığında değil, farenin ekrandaki ufacık bir hareketinde bile tüm katmanların kendi eksenlerinde farklı hızlarda hareket ettiği, optimize edilmiş bir requestAnimationFrame döngüsü yazdım.
SVG filtreleri ile yaşayan çevre Çimenlerin rüzgârda hafifçe dalgalanması hissini statik görsellerle veya basit dönüşümlerle değil; dinamik olarak hesaplanan SVG feTurbulence (fraktal gürültü) ve feDisplacementMap filtrelerini JavaScript döngüsüyle saniyede onlarca kez güncelleyerek elde ettim.
Scroll’a duyarlı etkileşim LifeTwin bölümüne inildiğinde ekrandaki yıldızların parlaması veya metinlerin ekrana süzülmesi (reveal efektleri) için IntersectionObserver kullandım. Böylece elementler sadece kullanıcının görüş alanına girdiğinde canlanarak performansı koruyor.
Mikro etkileşimler Kullanıcı logoya dokunduğunda çalışan özel "şelale" renk geçişleri (shimmer), maskeleme teknikleri (CSS mask) ve ekrana dağılan partiküller; ya da Otti’nin ekranda belirdiği andaki sprite animasyon döngüleri tamamen matematiksel bir akıcılıkla, kod tarafında detaylıca işlendi.

"Bu web sitesi; tasarımın estetiği, 3B dünyanın derinliği ve yaratıcı kodlamanın rasyonel gücüyle ördüğüm, benim dijital oyun alanım oldu."

galeri

{{ g.title }}
{{ lightboxTitle }}

sıradaki proje

Kişisel 3B Çalışmalar

Dijital Düşler

Stilize 3B ve pastel evrenler — brief’i olmayan, sadece merak için yapılan sahneler.